<template>
  <a-select
    v-model="defaultValue"
    show-search
    :placeholder="placeholder"
    :size="size"
    allow-clear
    :mode="mode"
    :style="{
      width: width,
    }"
    :filter-option="filterOption"
    @change="handleChange"
  >
    <a-select-option
      v-for="(element, index) in treeData"
      :key="index"
      :value="
        systemAreaType.data_type == 0
          ? element.area_code
          : systemAreaType.data_value_type == 1
          ? element.data_value * 1
          : element.data_value
      "
    >
      <app-show :code="code" :value="element.area_code" />
    </a-select-option>
  </a-select>
</template>

<script>
import systemAreaType from "@/api/systemAreaType"
export default {
  model: {
    //event:什么时候触发v-model行为
    event: "change-system-area",
    // 定义传递给v-model的那个变量，绑定到哪个属性值上
    prop: "systemAreaValue",
  },
  props: {
    code: {
      type: [String, Number],
      default: () => {
        return null
      },
    },
    width: {
      type: String,
      default: "230px",
    },
    radio: {
      type: Boolean,
      default: false,
    },
    extData: {
      // 父元素传递的数据， 原封不动 回调
      type: [Number, String, Array, Object],
      default: null,
    },
    systemAreaValue: {
      type: [String, Array, Number],
      default: () => {
        return null
      },
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    size: {
      type: String,
      default: "default",
    },
  },
  data() {
    return {
      systemAreaType: undefined,
      treeData: undefined,
      mapData: undefined,
      selectValue2Obj: {},
      defaultValue: this.$func.isArray(this.systemAreaValue)
        ? this.systemAreaValue
        : this.$func.isString(this.systemAreaValue) &&
          this.systemAreaValue != ""
        ? [this.systemAreaValue]
        : this.$func.isNumber(this.systemAreaValue)
        ? [this.systemAreaValue]
        : undefined,
    }
  },
  computed: {
    mode() {
      return this.radio ? "default" : "multiple"
    },
  },
  watch: {
    code() {
      this.getSystemArea()
    },
    systemAreaValue() {
      this.defaultValue = undefined
      if (this.$func.isArray(this.systemAreaValue)) {
        this.defaultValue = this.systemAreaValue
        return
      }
      if (this.$func.isString(this.systemAreaValue) && this.systemAreaValue) {
        this.defaultValue = [this.systemAreaValue]
        return
      }
      if (this.$func.isNumber(this.systemAreaValue)) {
        this.defaultValue = [this.systemAreaValue]
        return
      }
      return
    },
  },
  mounted() {
    this.getSystemArea()
  },
  methods: {
    async getSystemArea() {
      if (!this.code) {
        return
      }
      systemAreaType.cache(this.code).then((response) => {
        if (response.code !== 1 || !response.data) {
          return
        }
        this.systemAreaType = response.data.data_type
        this.treeData = response.data.data_menu
        this.mapData = response.data.data_map

        for (var index in this.treeData) {
          var tmpData = this.treeData[index]
          if (this.systemAreaType.data_type == 0) {
            this.selectValue2Obj[tmpData["area_code"]] = tmpData
          } else {
            this.selectValue2Obj[tmpData["data_value"]] = tmpData
          }
        }
      })
    },
    filterOption(value, option) {
      if (!value) return true
      if (!this.selectArray[option.key]) return false
      const obj = this.selectArray[option.key]
      if (obj.area_name && obj.area_name.indexOf(value) != -1) {
        return true
      }
      if (obj.data_value && obj.data_value.indexOf(value) != -1) {
        return true
      }
      if (obj.area_en && obj.area_en.indexOf(value) != -1) {
        return true
      }
      if (obj.area_abbreviation && obj.area_abbreviation.indexOf(value) != -1) {
        return true
      }

      return false
    },
    handleChange(value) {
      this.$emit("change-system-area", value)
      if (this.$func.isArray(value)) {
        let tmpArray = []
        for (let ii in value) {
          tmpArray.push(this.selectValue2Obj[value[ii]])
        }
        this.$emit(
          "change",
          tmpArray.length > 0 ? tmpArray : undefined,
          this.extData
        )
        return
      }
      this.$emit("change", this.selectValue2Obj[value], this.extData)
    },
  },
}
</script>

<style lang="less" type="text/less" scoped></style>
